<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .num{
            width: 50px;
        }
        table{
            text-align: center;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <button @click="init">点击渲染表格</button>
        <table border="1" cellspacing="0" cellpadding="7">
            <tr>
                <th><input type="checkbox" v-model="checkAll" @click="checks">全选</th>
                <th>id</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
            </tr>
            <tr v-for="(item, index) in list">
                <td><input type="checkbox" v-model="isCheck[index]" @click="check"></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><input type="number" class="num" value="1" @click="numChange"></td>
            </tr>
            <tr>
                <td class="all" colspan="5">总计:{{total}}</td>
            </tr>
        </table>
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script src="../lib/jQuery/jquery.min.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                list: '',
                checkAll: '',
                isCheck: [],
                total: 0,
                currentPrice: 0,
            },
            methods: {
                init() {
                    $.ajax({
                        url: 'phone.json',
                        type: 'GET',
                        success: (res) => {
                            this.list = res.list;
                            for (let i = 0; i < this.list.length; i++) {
                                this.isCheck.push(this.list[i].isCheck)
                            }
                            console.log(this.isCheck);
                        }
                    })
                },
                check(e) {
                    var $tr = $(e.target).parent().parent();
                    var price = Number($tr.children().eq(3).text());
                    var number = Number($tr.children().eq(4).children().val());
                    this.currentPrice = number * price;
                    if (!this.isCheck[$tr.index()-1]) {
                        this.total += number * price
                    } else {
                        this.total -= number * price
                    }
                    // for (let i = 0; i < this.isCheck.length; i++) {
                    //     if (this.isCheck[i] == false) {
                    //         this.checkAll = false;
                    //         console.log(this.checkAll);
                    //         return
                    //     }
                    //     this.checkAll = true
                    // }
                    // console.log(this.checkAll);
                },
                numChange(e) {
                    var $tr = $(e.target).parent().parent();
                    var price = Number($tr.children().eq(3).text());
                    var number = Number($tr.children().eq(4).children().val());
                    if (this.isCheck[$tr.index()-1]) {
                        this.total = this.total - this.currentPrice + price * number
                        this.currentPrice = price * number;
                    }
                },
                checks() {
                    this.isCheck = [];

                    if (!this.checkAll) {
                        for (let i = 0; i < this.list.length; i++) {
                            this.isCheck.push(false);
                            $('tr').eq(i+1).children().eq(0).children().click()
                        }
                    } else {
                        for (let i = 0; i < this.list.length; i++) {
                            this.isCheck.push(true);
                            $('tr').eq(i+1).children().eq(0).children().click()
                        }
                    }

                }
            },
        })
    </script>
</body>
</html>